<template>
    <div class="content">
        <div class="mainCollection">
        <div class="headerCollection" id="age">
            <h2><a href="javascript:;">菜谱</a></h2>
            <div class="header_img1">
                <a href="javascript:;"><img src="@/assets/img/商品详情/images/收藏_03.png" alt=""></a>
            </div>
        </div>
        <ul class="navCollection" >
            <li @click="content(1)"><a href="javascript:;" >全部</a></li>
            <li @click="video(2)"><a href="javascript:;" >视频</a></li>
            <li @click="essay(3)"><a href="javascript:;" >文章</a></li>
            <li @click="cook(4)"><a href="javascript:;" >厨师</a></li>
        </ul>
<!--  -->
<!--  -->
        <ul class="cookCollection" :id="indexagg==4 ? 'user1' : 'user2' ">
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                    </div>
                </a>
            </li>
        </ul>
    
    
    
        <ul class="essay" :id="indexagg==3?'user1':'user2'">
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
    
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
    
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p class="p">番茄炒鸡蛋</p>
                    <div class="location">
                        <p>【材料】：鸡蛋4枚、西红柿2个、白糖少许、清水少许、油适量、盐适量。【制作步骤】：1、鸡蛋磕入碗中，调入适量盐，添加蛋液三分之一左右的清水（老人们做这道菜时蛋液中是不加水的）。蛋液中加清水的作用是为了鸡蛋炒出来更加蓬松
                            2、把蛋液充分搅拌均匀，一定要快速搅拌，让蛋清与蛋黄混合均匀。
                            3、西红柿洗净后先切片，再切成小块儿，块儿越小越好。这里的西红柿不必去皮，皮中番茄红素的含量很高，如果嫌弃西红柿皮的口感，可以在炒好后把皮挑选出来。
                            4、热锅热油，油要适当多一些，小火，油热后倒入蛋液，暂且不要动它。
                            5、待蛋液逐渐凝固，还未完全凝固时，用筷子把鸡蛋划散，形状很自然的鸡蛋块儿就形成了，鸡蛋炒好后盛出来待用（不要把鸡蛋炒老了）。
                            6、重起油锅，这次油要少，倒入西红柿，中火翻炒。
                            7、把西红柿炒融，炒出红油，调入少许白糖炒匀。加白糖可以让这道菜口感更有层次，回味也更好。
                            8、西红柿的汤汁全部炒出之后，把炒好的鸡蛋倒进去，快速炒匀即可关火。
                            9、西红柿的汤汁包裹住鸡蛋，味道融合在一起，营养开胃爽口下饭，往往有这一道菜就能下一锅米饭。
                        </p>
                        <a class="a" href="javascript:;">更多</a>
                    </div>
                </a>
            </li>
        </ul>
    
        <ul class="video" :id="indexagg==2?'user1':'user2'">
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
    
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
    
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
            <li class="left">
                <a href="javascript:;">
                    <p>番茄炒鸡蛋阿松大</p>
                    <div class="location">
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    
    
        
        <div class="contenta" :id="indexagg==1?'user1':'user2'">
            <ul class="bottom">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num1}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg1" href="javascript:;" class="a">
                            <img id="img1"  :src="src1"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="bottom">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num2}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg2" href="javascript:;" class="a">
                            <img id="img3"  :src="src2"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="bottom">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num3}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg3" href="javascript:;" class="a">
                            <img id="img3"  :src="src3"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
            <ul class="bottom">
                <li class="left">
                    <a href="/DetailPage">
                        <p>视频</p>
                        <img src="@/assets/img/菜铺/菜谱_10.png" alt="">
                        <div class="img">
                            <img src="@/assets/img/菜铺/播放 (1).png" alt="">
                        </div>
                    </a>
                </li>
                <li class='right'>
                    <a href="/DetailPage">
                        <h2>简单制作蛋包饭</h2>
                        <p class="right_p">
                            蛋包饭是很做人的心头爱，怎么在 家里制作美味的蛋包饭呢？我们...
                        </p>
                    </a>
                    <div class="bottom1">
                        <a href="JavaScript:;">
                            <p id="src3">{{num4}}</p><span>收藏</span>
                        </a>
                        <a @click="showMsg4" href="javascript:;" class="a">
                            <img id="img3"  :src="src4"  alt="">
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        
<!--  -->
<!--  -->
    </div>
    </div>
</template>
<script>
import imgmenu1 from "@/assets/img/底部/发布-恢复的_10.png";
import imgmenu2 from "@/assets/img/底部/images/收藏_05.png";
export default {
    name: 'HostCollection',
    data(){
        return{
            indexagg:1,
            num1:560,
            num2:560,
            num3:560,
            num4:560,
             a1 : 0,
             a2 : 0,
             a3: 0,
             a4 : 0,
             src1:imgmenu1,
             src2:imgmenu1,
             src3:imgmenu1,
             src4:imgmenu1,
        }
    },
    methods: {
            showMsg1:function(event){
    console.log(this.num);
    if (this.a1 % 2 === 0) {
        
        this.src1=imgmenu2;
        this.num1+=1;
        this.a1+=1;
    } else {
        this.src1=imgmenu1;
        this.num1-=1;
        this.a1-=1;

    }
            },
    content:function(indexadd){
                this.indexagg=indexadd;
                
                console.log(this.indexagg);
    },
    video:function(indexadd){
                this.indexagg=indexadd;
                console.log(this.indexagg);
    },
    essay:function(indexadd){
                this.indexagg=indexadd;
                console.log(this.indexagg);
    },
    cook:function(indexadd){
                this.indexagg=indexadd;
                console.log(this.indexagg);
    },
    
            showMsg2:function(event){
    console.log(this.num);
    if (this.a2 % 2 === 0) {
        
        this.src2=imgmenu2;
        this.num2+=1;
        this.a2+=1;
    } else {
        this.src2=imgmenu1;
        this.num2-=1;
        this.a2-=1;

    }
            },
            showMsg3:function(event){
    console.log(this.num);
    if (this.a3 % 2 === 0) {
        
        this.src3=imgmenu2;
        this.num3+=1;
        this.a3+=1;
    } else {
        this.src3=imgmenu1;
        this.num3-=1;
        this.a3-=1;
    }
            },
            showMsg4:function(event){
    console.log(this.num);
    if (this.a4 % 2 === 0) {
        
        this.src4=imgmenu2;
        this.num4+=1;
        this.a4+=1;
    } else {
        this.src4=imgmenu1;
        this.num4-=1;
        this.a4-=1;

    }
    }
        },
}
</script>
<style lang="">

#user1{
    /* z-index: 10; */
    display: block;
}
#user2{
    /* z-index: 10; */
    display: none;
    
}
a{
    text-decoration: none;
    color: #000;
}
li{
	list-style-type: none;
}
body{
    margin: 0;
    padding: 0;
}
    .mainCollection{
    padding: 8%;
    width: 84%;
    
    padding-top: 0;
    padding-bottom: 0;
}
.mainCollection .headerCollection{
    width: 100%;
    padding-top: 2%;
    height: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    margin-bottom: -1rem;
}
.mainCollection .headerCollection h2{
    /* align-items: center; */
    margin: -0;
    height: 5rem;
    line-height: 5rem;
    font-weight: 500;
    /* padding-left: 8%; */
    letter-spacing: 3px;
    font-size: 25px;
}
.mainCollection .headerCollection h2 a{
    font-size: 1rem;
}
.mainCollection .header_img1{
    /* padding-right: 8%; */
    /* line-height: 5.9rem; */
    padding-top: 1%;
    display: flex;
    align-items: center;
    text-align: center;
    width: 1.2rem;
    
}
.mainCollection .header_img1 img{
    
    width: 65%;
    height: 37%;
}   
.navCollection{
     display: flex;
    flex-direction: row; 
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 100%;
    margin-top: 0.3rem;
}
.navCollection li:first-child{
    margin-left: 0;
}
.navCollection li{
    margin: 0.7rem;
    margin-right: 0;
    background-color: #2cd2b9;
    border-radius: 5px;
    text-align: center;
    width: 4rem;
    height: 1rem;
    line-height: 1rem;
    list-style: none;
}



/*  */
/*  */


.cookCollection{
    width: 100%;
    margin-bottom: 4rem;
    padding: 0;
    display: none;
    
}

.cookCollection .left{
    
    display: inline-block;
    margin: 0;
    border-radius: 0.5rem;
    background-color: #f4f4f4;
    text-align: center;
    align-items: center;
    width: 30%;
    padding: 1%;
    /* position: relative; */
    list-style: none;
    margin-bottom: 0.5rem;
}
.cookCollection  .left p{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin: 0;
    margin-left: 1%;
    width: 100%;
    height: 2rem;
    /* line-height: 1.5rem; */
    text-align: center;
    font-size: 0.5rem;
    /* line-height: 4rem; */
    color: #000;
    /* margin-bottom: 0.5rem; */
}
.cookCollection  .left .location{
    position: relative;
    padding-bottom: 0.2rem;
}
.cookCollection .left a{
    
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cookCollection .left img{

    width: 3rem;
    height: 3rem;
}
.cookCollection .left .img{
    border: 1px solid #fff;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.8rem;
    position: absolute;
    left: 30%;
    top: 25%;
    background-color: #92938e;
}
.cookCollection .left .img img{
    padding-left:10%;
     /*padding-top: 20%; */
    width: 40%;
    height: 40%;
    line-height: 60%;
}

/*  */
/*  */

.essay{
    width: 100%;
    margin-bottom: 4rem;
    padding: 0;
    display: none;
    
}

.essay .left{
    
    display: inline-block;
    margin: 0;
    border-radius: 0.5rem;
    background-color: #f4f4f4;
    text-align: center;
    align-items: center;
    width: 45%;
    padding: 2%;
    /* position: relative; */
    list-style: none;
    margin-bottom: 0.5rem;
}
.essay  .left .location{
    /* height: 4rem; */
    position: relative;
}

.essay .left a{
    
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.essay .left a .p{
    height: 2rem;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin: 0;
    font-size: 0.5rem;
    /* margin-bottom: 0.5rem; */
    /* margin-top: 0.5rem; */
}
.essay .left  .location p{

    font-size: 0.7rem;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    /* height: 4rem; */
    margin: 0;
    /* margin-top: 0.5rem; */
    margin-bottom: 1rem;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
}
.essay .left  .location .a{
    border-radius: 1rem;
    background-color: #fff;
    margin-bottom: 0.2rem;
    font-size: 0.5rem;
}

/*  */
/*  */

.video{
    width: 100%;
    margin-bottom: 4rem;
    padding: 0;
    display: none;
    
}

.video .left{
    
    display: inline-block;
    margin: 0;
    border-radius: 0.5rem;
    background-color: #f4f4f4;
    text-align: center;
    align-items: center;
    width: 30%;
    padding: 1%;
    /* position: relative; */
    list-style: none;
    margin-bottom: 0.5rem;
}
.video  .left p{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin: 0;
    margin-left: 1%;
    width: 100%;
    height: 2rem;
    /* line-height: 1rem; */
    font-size: 0.5rem;
    /* line-height: 4rem; */
    color: #000;
    /* margin-bottom: 0.5rem; */
}
.video  .left .location{
    position: relative;
    padding-bottom: 0.2rem;
}
.video .left a{
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.video .left img{

    width: 3rem;
    height: 3rem;
}
.video .left .img{
    border: 1px solid #fff;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    position: absolute;
    left: 30%;
    top: 25%;
    background-color: #92938e;
}
.video .left .img img{
    padding-left:10%;
     /*padding-top: 20%; */
    width: 40%;
    height: 40%;
    line-height: 60%;
}

/*  */
/*  */

.contenta{
    
    display: flex;
    flex-direction: column;
    
    padding-bottom: 5rem;
    margin: 0;
    padding: 0;
    margin-bottom: 3rem;
    /* display: none; */
}
.content1{
    margin-bottom: 5rem;
}
.contenta h2{
    margin-top: 0;
    margin-bottom: 10px;
}
.bottom{
    /* margin-left: -2.7rem; */
    width: 100%;
    height: 100%;
    display: flex;
    margin-top: 0;
    flex-direction: row;
    margin: 0;
    padding: 0;
    padding-bottom: 2%;
}
.contenta .left p{
    margin-top: -0.05%;
    margin-left: 1%;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-size: 0.5rem;
}
.contenta .left{
    position: relative;
    list-style: none;
}
.contenta .left img{

    width: 5rem;
    height: 5rem;
}
.contenta .left .img{
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    margin-top: -0.8rem;
    margin-left: -0.8rem;
    left: 50%;
    top: 50%;
    background-color: #92938e;
}
.contenta .left .img img{
    padding-left: 10%;
    padding-top: 20%;
    width: 60%;
    height: 60%;
}
.contenta .right{
    width: 100%;
    /* height: 7.8125rem; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contenta .right h2{
    text-align: left;
    margin-bottom: 10%;
    -webkit-line-clamp: 2;
    letter-spacing: 1px;
    margin-top: -1%;
    padding-left: 10%;
    font-weight: 700;
    font-size: 18px;
}
.contenta .right_p{
    /* background-color: #ff8787; */
    text-align: left;
    padding-left: 10%;
    margin-top: -5px;
    font-size: 10px;
    margin-bottom: 0;
}
.contenta .right .bottom1{
    /* height: 3rem; */
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.contenta .right .bottom1 a{
    text-align: left;
    float: left;
    width: 67%;
    font-size: 14px;
    margin: 0;
    padding-left: 10%;
    /* padding-top: 0.5rem; */
}
.contenta .right .bottom1 a p{
    /* width: 2rem; */
    margin: 0;    
    /* height: 2.8rem; */
    padding: 0;
    /* line-height: 4.5rem; */
    display: inline-block;
   text-align: center;
   padding-top: 0.3rem;
}
.contenta .right .bottom1 a span{
    margin-left: 0.1rem;
   
}
.contenta .right .bottom1 img{
    /* margin-top: 3%;
    margin-right: 10px; */
    width: 1rem;
    height: 1rem;
    padding-left: 2rem;
}
.contenta .right .bottom1 .a{
    width: 3.5rem;
    /* height: 3rem; */
    /* line-height: 5.2rem; */
    
}

</style>